<template>
  <view class="container">
    <view class="header">
      <text class="title">我的任务</text>
      <view class="header-right">
        <text @click="goSetting" class="iconfont icon-setting"></text>
        <text @click="goStats" class="iconfont icon-stats"></text>
      </view>
    </view>
    
    <view class="task-filter">
      <view class="filter-item" :class="{active: currentFilter === 'all'}" @click="setFilter('all')">全部</view>
      <view class="filter-item" :class="{active: currentFilter === 'work'}" @click="setFilter('work')">工作</view>
      <view class="filter-item" :class="{active: currentFilter === 'study'}" @click="setFilter('study')">学习</view>
      <view class="filter-item" :class="{active: currentFilter === 'life'}" @click="setFilter('life')">生活</view>
    </view>
    
    <view class="task-list">
      <view v-if="filteredTasks.length === 0" class="empty-tip">暂无任务，请点击下方添加按钮</view>
      <view 
        v-for="(task, index) in filteredTasks" 
        :key="task.id" 
        class="task-item"
        :class="{'completed': task.completed}"
        @longpress="editTask(task)"
        @touchstart="dragStart(task, index)"
        @touchmove="dragMove"
        @touchend="dragEnd">
        <view class="task-left">
          <checkbox :checked="task.completed" @change="toggleTaskStatus(task)"></checkbox>
          <view class="task-content">
            <text class="task-title">{{ task.title }}</text>
            <text class="task-time">{{ formatTime(task.duration) }}</text>
          </view>
        </view>
        <view class="task-right">
          <text class="task-tag" :style="{backgroundColor: getTagColor(task.tag)}">{{ getTagName(task.tag) }}</text>
          <text class="iconfont icon-drag" @touchstart.stop="dragStart(task, index)"></text>
        </view>
      </view>
    </view>
    
    <view class="add-btn" @click="addTask">
      <text class="iconfont icon-add"></text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed ,onMounted, watch } from 'vue'
import { getTasks, saveTasks } from '@/utils/storage.js'

const tasks = ref([])
const currentFilter = ref('all')
const draggingTask = ref(null)
const dragStartIndex = ref(-1)
const dragEndIndex = ref(-1)

onMounted(() => {
  loadTasks()
})

const loadTasks = async () => {
  const storedTasks = await getTasks()
  if (storedTasks) {
    tasks.value = storedTasks
  }
}

const filteredTasks = computed(() => {
  if (currentFilter.value === 'all') {
    return tasks.value
  }
  return tasks.value.filter(task => task.tag === currentFilter.value)
})

const setFilter = (filter) => {
  currentFilter.value = filter
}

const addTask = () => {
  uni.navigateTo({
    url: '/pages/taskEdit/taskEdit'
  })
}

const editTask = (task) => {
  uni.reLaunch({
    url: `/pages/taskEdit/taskEdit?id=${task.id}`
  })
}

const toggleTaskStatus = (task) => {
  task.completed = !task.completed
  saveTasks(tasks.value)
}

const dragStart = (task, index) => {
  draggingTask.value = task
  dragStartIndex.value = index
}

const dragMove = (e) => {
  // 处理拖拽移动逻辑
}

const dragEnd = () => {
  if (dragStartIndex.value !== -1 && dragEndIndex.value !== -1 && dragStartIndex.value !== dragEndIndex.value) {
    const tasksCopy = [...tasks.value]
    const draggedTask = tasksCopy.splice(dragStartIndex.value, 1)[0]
    tasksCopy.splice(dragEndIndex.value, 0, draggedTask)
    tasks.value = tasksCopy
    saveTasks(tasks.value)
  }
  dragStartIndex.value = -1
  dragEndIndex.value = -1
}

const formatTime = (duration) => {
  const hours = Math.floor(duration / 3600)
  const minutes = Math.floor((duration % 3600) / 60)
  const seconds = duration % 60
  
  let timeStr = ''
  if (hours > 0) timeStr += `${hours}时`
  if (minutes > 0) timeStr += `${minutes}分`
  if (seconds > 0 || (hours === 0 && minutes === 0)) timeStr += `${seconds}秒`
  
  return timeStr
}

const getTagColor = (tag) => {
  const colors = {
    work: '#165DFF',
    study: '#36B37E',
    life: '#FF5630'
  }
  return colors[tag] || '#165DFF'
}

const getTagName = (tag) => {
  const names = {
    work: '工作',
    study: '学习',
    life: '生活'
  }
  return names[tag] || '其他'
}

const goSetting = () => {
  uni.navigateTo({
    url: '/pages/setting/setting'
  })
}

const goStats = () => {
  uni.navigateTo({
    url: '/pages/stats/stats'
  })
}

watch(tasks, (newTasks) => {
  saveTasks(newTasks)
}, { deep: true })
</script>

<style scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  background-color: #f7f7f7;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.header-right {
  display: flex;
  gap: 30rpx;
}

.task-filter {
  display: flex;
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 10rpx;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.filter-item.active {
  background-color: #165DFF;
  color: #fff;
}

.task-list {
  margin-top: 20rpx;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  transition: all 0.3s;
}

.task-item.completed .task-title {
  text-decoration: line-through;
  color: #999;
}

.task-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
}

.task-content {
  max-width: 450rpx;
}

.task-title {
  font-size: 32rpx;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-time {
  font-size: 24rpx;
  color: #666;
}

.task-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.task-tag {
  padding: 6rpx 12rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #fff;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  width: 88rpx;
  height: 88rpx;
  background-color: #165DFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 48rpx;
  box-shadow: 0 4rpx 20rpx rgba(22, 93, 255, 0.4);
}

/* 暗黑模式样式 */
.container.dark {
  background-color: #1c1c1e;
}

.container.dark .task-item,
.container.dark .task-filter {
  background-color: #2c2c2e;
  color: #fff;
}

.container.dark .task-item.completed .task-title {
  color: #666;
}

.container.dark .empty-tip {
  color: #666;
}
</style>  